<template>
	<el-container style="height: 100%">
		<div class="login-container" :class="isCollapse === '1' ? 'one' : (isCollapse === '2' ?'two':'three') ">
			<div class="right_set">
				<el-button type="primary" icon="el-icon-setting" circle @click="logindemo=true"></el-button>
			</div>
			<!-- <div class="login_text">
				<span>中共中央组织部&nbsp;&nbsp;●&nbsp;&nbsp;首都信息发展股份有限公司 联合研制</span><span>技术支持：首都信息发展股份有限公司</span><span>服务热线：010-59307070</span>
			</div> -->
			<vxe-modal v-model="logindemo" width="750" show-footer title="登录风格模式选择">
				<template v-slot>
					<div class="neikc">
						<ul>
							<li :class="isCollapse==='1'?'tips':''" @click="showtype('1')" id="one"><span class="one"></span><em></em></li>
							<li :class="isCollapse==='2'?'tips':''" @click="showtype('2')" id="two"><span class="two"></span><em></em></li>
							<li :class="isCollapse==='3'?'tips':''" @click="showtype('3')" id="three"><span class="three"></span><em></em></li>
							<!-- <li class=""><span class="four"></span><em></em></li> -->
						</ul>
					</div>
				</template>
			</vxe-modal>
			<div class="top_logo"><span class="logo_pic"></span><span>{{ $t("login.title") }}</span></div>
			<div class="dunpan"></div>
			<div class="bodybk">
				<div class="baiy"></div>
				<div class="loginbody"></div>
				<div class="logbody"></div>
			</div>
			<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
				<el-form-item prop="code">
					<span class="svg-container">
						<svg-icon icon-class="user" />
					</span>
					<el-input ref="username" v-model="loginForm.code" :placeholder="$t('login.username')" name="code" type="text"
					 tabindex="1" autocomplete="on" @keyup.enter.native="$refs.password.focus()" />
				</el-form-item>

				<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
					<el-form-item prop="password">
						<span class="svg-container">
							<svg-icon icon-class="password" />
						</span>
						<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" :placeholder="$t('login.password')"
						 name="password" tabindex="2" autocomplete="on" @keyup.native="checkCapslock" @blur="capsTooltip = false"
						 @keyup.enter.native="handleLogin" />
						<span class="show-pwd" @click="showPwd">
							<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
						</span>
					</el-form-item>
				</el-tooltip>

				<el-button :loading="loading" type="primary" @click.native.prevent="handleLogin">
					{{ $t("login.logIn") }}
				</el-button>
			</el-form>

			<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
				{{ $t("login.thirdpartyTips") }}
				<br />
				<br />
				<br />
				<social-sign />
			</el-dialog>
			<!--流星-->
			<div class="liuxing liuxing1 liuxingFla"></div>
			<div class="liuxing liuxing2 liuxingFla2"></div>
			<div class="liuxing liuxing3 liuxingFla3"></div>
			<div class="liuxing liuxing4 liuxingFla4"></div>
		</div>
	</el-container>
</template>

<script>
	import {
		validUsername
	} from "@/utils/validate";
	import SocialSign from "./components/SocialSignin";
	import {
		getLoginshow,
		setLoginshow
	} from '@/utils/auth' // get token from cookie
	import $ from "jquery";
	export default {
		name: "Login",
		components: {
			SocialSign,
		},
		data() {
			const validateUsername = (rule, value, callback) => {
				if (!validUsername(value)) {
					callback(new Error("请输入正确用户名"));
				} else {
					callback();
				}
			};
			const validatePassword = (rule, value, callback) => {
				if (value.length < 6) {
					callback(new Error("密码必须大于6位"));
				} else {
					callback();
				}
			};
			return {
				logindemo: false,
				isCollapse: '1',
				loginForm: {
					code: "ADMIN",
					password: "123456",
				},
				loginRules: {
					// code: [
					//   { required: true, trigger: "blur", validator: validateUsername }
					// ],
					password: [{
						required: true,
						trigger: "blur",
						validator: validatePassword
					}, ],
				},
				passwordType: "password",
				capsTooltip: false,
				loading: false,
				showDialog: false,
				redirect: undefined,
				otherQuery: {},
			};
		},
		watch: {
			$route: {
				handler: function(route) {
					const query = route.query;
					if (query) {
						this.redirect = query.redirect;
						this.otherQuery = this.getOtherQuery(query);
					}
				},
				immediate: true,
			},
		},
		created() {
			// window.addEventListener('storage', this.afterQRScan)
		},
		mounted() {
			this.isCollapse = getLoginshow();
			// this.showtype(this.isCollapse)
			if (this.loginForm.username === "") {
				this.$refs.username.focus();
			} else if (this.loginForm.password === "") {
				this.$refs.password.focus();
			}
		},
		destroyed() {
			// window.removeEventListener('storage', this.afterQRScan)
		},
		methods: {
			collapse() {
				// this.isCollapse = !this.isCollapse;
			},
			checkCapslock(e) {
				const {
					key
				} = e;
				this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
			},
			showPwd() {
				if (this.passwordType === "password") {
					this.passwordType = "";
				} else {
					this.passwordType = "password";
				}
				this.$nextTick(() => {
					this.$refs.password.focus();
				});
			},
			handleLogin() {
				window.name = ''
				this.$refs.loginForm.validate((valid) => {
					if (valid) {
						this.loading = true;
						this.$store
							.dispatch("user/login", this.loginForm)
							.then((data) => {
								if (data.message) {
									new Error(data.message);
									this.$message({
										message: data.message,
										type: "warning",
									});
									this.loading = false;
									return;
								}
								this.$router.push({
									path: "/",
									query: this.otherQuery
								});
								this.loading = false;
							})
							.catch(() => {
								this.loading = false;
							});
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
			getOtherQuery(query) {
				return Object.keys(query).reduce((acc, cur) => {
					if (cur !== "redirect") {
						acc[cur] = query[cur];
					}
					return acc;
				}, {});
			},
			showtype(index) {

				if ('1' === index) {
					this.isCollapse = '1'
					setLoginshow('1')
				} else if ('2' === index) {
					this.isCollapse = '2'
					setLoginshow('2')
				} else {
					this.isCollapse = '3'
					setLoginshow('3')
				}
			},
			showlogin() {

				var _this = this;
				setTimeout(
					function() {
						_this.logindemo = true;
					}, 200
				)

			}
			// afterQRScan() {
			//   if (e.key === 'x-admin-oauth-code') {
			//     const code = getQueryObject(e.newValue)
			//     const codeMap = {
			//       wechat: 'code',
			//       tencent: 'code'
			//     }
			//     const type = codeMap[this.auth_type]
			//     const codeName = code[type]
			//     if (codeName) {
			//       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
			//         this.$router.push({ path: this.redirect || '/' })
			//       })
			//     } else {
			//       alert('第三方登录失败')
			//     }
			//   }
			// }
		},
	};
</script>

<style lang="scss">
	/* 修复input 背景不协调 和光标变色 */
	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

	$bg: #44adfe;
	$light_gray: #fff;
	$cursor: #000;

	@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
		.login-container .el-input input {
			color: $cursor;
		}
	}

	/* reset element-ui css */
	.login-container {
		.el-form-item__content {
			font-size: 16px;
		}

		.el-input {
			display: inline-block;
			height: 45px;
			width: 85%;

			input {
				background: transparent;
				border: 0px;
				-webkit-appearance: none;
				border-radius: 0px;
				padding: 0px 5px 0px 15px;
				color: $light_gray;
				height: 46px;
				caret-color: $cursor;
				line-height: 30px;
				font-size: 16px;

				&:-webkit-autofill {
					box-shadow: 0 0 0px 1000px $bg inset !important;
					-webkit-text-fill-color: $cursor !important;
				}
			}
		}

		.el-form-item {
			border: 1px solid rgba(255, 255, 255, 0.1);
			background: rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			color: #454545;
			font: 16px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
		}
	}
</style>

<style lang="scss" scoped>
	@import "~@/assets/login/login.css";
	$bg: #44adfe;
	$dark_gray: #889aa4;
	$light_gray: #eee;

	.bk_login {
		height: 100%;
	}

	.login-container {

		min-height: 100%;
		position: relative;
		width: 100%;
		background: $bg url(~@/assets/login/images/login.jpg) no-repeat;
		background-size: 100% 100%;
		overflow: hidden;

		&.two {
			background: $bg url(~@/assets/login/images/login2.jpg) no-repeat;
			background-size: 100% 100%;
		}

		&.three {
			background: #03389E url(~@/assets/login/images/login_bj.png) repeat-x top;
		}

		.el-input {
			height: 48px;
			vertical-align: middle;
		}

		.right_set {
			position: absolute;
			right: 6px;
			top: 6px;
			width: 30px;
			height: 30px;
			z-index: 8;

			::v-deep.el-button--medium.is-circle {
				padding: 4px;
				font-size: 18px;
				background-color: #1890ff21;

				&:hover {
					background-color: #1637af;
				}
			}
		}
		.login_text{
			color:#eaeeff;
			position: absolute;
			bottom: 0;
			left: 0;
			right:0;
			height: 40px;
			line-height: 40px;
			text-align: center;
			text-shadow: 1px 0px 3px #000; z-index: 20;
			& span{display: inline-block; padding: 0 8px;font-size: 16px;}
		}

		&.one {
			.top_logo {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -260px;
				font-size: 38px;
				-webkit-transform: translate(-50%, 0%);
				-moz-transform: translate(-50%, 0%);
				transform: translate(-50%, 0%);
				line-height: 48px;
				color: white;
				font-weight: 600;
				letter-spacing: 3px;
				width: 580px !important;
				text-align: center;
				z-index: 55;
			}

			.login-form {
				position: absolute;
				width: 480px;
				left: 50%;
				top: 50%;
				margin-top: -120px;
				-webkit-transform: translate(-50%, 0%);
				-moz-transform: translate(-50%, 0%);
				transform: translate(-50%, 0%);
				background-color: rgba(240, 246, 249, 0.0);
				max-width: 100%;
				z-index: 88;
				padding: 60px 65px;
				// margin: 0 auto;
				overflow: hidden;
				border-radius: 8px;
			}

			.login-form .el-form-item {
				border: 1px solid rgb(94 180 224);
				background: #0b3fb5;
				border-radius: 5px;
				color: #ffffff;
			}

			::v-deep .login-form .el-input input {
				color: #f2ecec;
				caret-color: #fdf9f9;
				background-color: #0a63b00a !important;
			}

			::v-deep .login-form .el-input input:-webkit-autofill {
				-webkit-box-shadow: 0 0 0px 1000px#0b3fb5 inset !important;
				box-shadow: 0 0 0px 1000px #0b3fb5 inset !important;
				-webkit-text-fill-color: #fff !important;
			}

			::v-deep .login-form .el-button--medium {
				padding: 14px 20px;
				font-size: 18px;
				border-radius: 4px;
				width: 100%;
			}

			.svg-container {
				color: #fff;
			}

			.show-pwd {
				color: #fff;
			}

			::v-deep .login-form .el-button--primary {
				color: #FFFFFF;
				background-color: #0b3fb5;
				border-color: #6ab8e1;

				&:hover {
					background-color: #0743cf;
				}
			}
		}

		&.two {
			.top_logo {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -160px;
				font-size: 45px;
				-webkit-transform: translate(-50%, 0%);
				-moz-transform: translate(-50%, 0%);
				transform: translate(-50%, 0%);
				line-height: 48px;
				color: white;
				font-weight: 600;
				width: 680px !important;
				text-align: center;
				letter-spacing: 6px;
				padding-left: 11px;
				z-index: 55;
			}

			.login-form {
				position: absolute;
				width: 612px;
				left: 50%;
				top: 50%;
				margin-top: -100px;
				-webkit-transform: translate(-50%, 0%);
				-moz-transform: translate(-50%, 0%);
				transform: translate(-50%, 0%);
				background-color: rgba(240, 246, 249, 0);
				max-width: 100%;
				z-index: 88;
				padding: 60px 0px 0px;
				// margin: 0 auto;
				overflow: hidden;
				border-radius: 8px;
				vertical-align: middle;
				// display: flex;
				// height: 50px;
			}

			.login-form .el-form-item {
				border: 1px solid rgba(24, 144, 255, 0.58);
				background: #ffffff;
				border-radius: 5px;
				color: #454545;
				width: 230px;
				display: inline-flex;
				margin: 0px 10px;
				height: 50px;
				vertical-align: bottom;
			}

			::v-deep .login-form .el-input input {
				color: #454545;
				caret-color: #454545;
				background-color: #fff !important;
			}

			::v-deep .login-form .el-input input:-webkit-autofill {
				-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
				box-shadow: 0 0 0px 1000px #fff inset !important;
				-webkit-text-fill-color: #454545 !important;
			}

			::v-deep .login-form .el-button--medium {
				padding: 14px 20px;
				font-size: 18px;
				border-radius: 4px;
				width: 100px;
				margin-left: 10px;
			}

			::v-deep .el-button--primary {
				color: #ffffff;
				background-color: #112fa0;
				border-color: #105594;

				&:hover {
					background-color: #1637af;
				}
			}
		}

		&.three {
			$bg: #44adfe;
			$light_gray: #fff;
			$cursor: #000;

			.top_logo {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -310px;
				font-size: 45px;
				-webkit-transform: translate(-50%, 0%);
				-moz-transform: translate(-50%, 0%);
				transform: translate(-50%, 0%);
				line-height: 48px;
				color: white;
				font-weight: 600;
				width: 690px !important;
				text-align: center;
				letter-spacing: 6px;
				padding-left: 11px;
				z-index: 55;
			}

			.login-form {
				position: absolute;
				width: 280px;
				left: 50%;
				top: 50%;
				margin-top: -200px;
				margin-left: 80px;
				background-color: rgba(240, 246, 249, 0.0);
				max-width: 100%;
				z-index: 88;
				padding: 60px 6px;
				overflow: hidden;
				border-radius: 8px;
			}

			::v-deep .login-form .el-button--medium {
				padding: 14px 20px;
				font-size: 18px;
				border-radius: 4px;
				width: 100%;
			}

			.login-form .el-form-item {
				border: 1px solid rgb(185 224 249);
				background: rgb(255 255 255);
				border-radius: 5px;
				color: #454545;
			}

			::v-deep .login-form .el-input input {
				color: #454545;

				&:-webkit-autofill {
					-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
					box-shadow: 0 0 0px 1000px #fff inset !important;
					-webkit-text-fill-color: #454545 !important;
				}
			}
		}

		.tips {
			font-size: 14px;
			color: #fff;
			margin-bottom: 10px;

			// span {
			//   &:first-of-type {
			//     margin-right: 16px;
			//   }
			// }
		}

		.svg-container {
			padding: 6px 5px 6px 15px;
			color: $dark_gray;
			vertical-align: middle;
			width: 30px;
			display: inline-block;
		}

		.title-container {
			position: relative;

			.title {
				font-size: 26px;
				color: $light_gray;
				margin: 0px auto 40px auto;
				text-align: center;
				font-weight: bold;
			}

			.set-language {
				color: #fff;
				position: absolute;
				top: 3px;
				font-size: 18px;
				right: 0px;
				cursor: pointer;
			}
		}

		.show-pwd {
			position: absolute;
			right: 10px;
			top: 7px;
			font-size: 16px;
			color: $dark_gray;
			cursor: pointer;
			user-select: none;
		}

		.thirdparty-button {
			position: absolute;
			right: 0;
			bottom: 6px;
		}

		@media only screen and (max-width: 470px) {
			.thirdparty-button {
				display: none;
			}
		}

		/*流星*/
		&.one .dunpan,
		&.two .bodybk {
			display: block;
		}

		&.two .dunpan,
		&.three .dunpan,
		&.one .bodybk,
		&.two .bodybk {
			display: none;
		}
	}
</style>
